<template>
  <div class="platform-services">
    <div class="section-header">
      <h3>
        <i class="fas fa-cogs"></i>
        <span>平台服务</span>
      </h3>
      <NuxtLink to="/services" class="more-link">
        <span>更多服务</span>
        <i class="fas fa-angle-double-right"></i>
      </NuxtLink>
    </div>

    <div class="services-description">
      <p>为您提供全方位的专业服务支持,让交易更简单、更安全、更高效</p>
    </div>

    <div class="services-grid">
      <!-- 物流配送 -->
      <div class="service-card">
        <div class="card-image">
          <img src="/images/service-logistics.jpg" alt="物流配送" />
        </div>
        <div class="card-content">
          <h4 class="card-title">物流配送</h4>
          <p class="card-description">冷链运输·全程监控<br>准时送达·品质保证</p>
        </div>
      </div>

      <!-- 供应链金融 -->
      <div class="service-card">
        <div class="card-image">
          <img src="/images/service-supply-chain.jpg" alt="供应链金融" />
        </div>
        <div class="card-content">
          <h4 class="card-title">供应链金融</h4>
          <p class="card-description">供应链金融·信用贷款<br>灵活周转·快速审批</p>
        </div>
      </div>

      <!-- 数字营销 -->
      <div class="service-card">
        <div class="card-image">
          <img src="/images/service-digital-marketing.jpg" alt="数字营销" />
        </div>
        <div class="card-content">
          <h4 class="card-title">数字营销</h4>
          <p class="card-description">品牌推广·市场分析<br>精准营销·效果追踪</p>
        </div>
      </div>

      <!-- 仓储服务 -->
      <div class="service-card">
        <div class="card-image">
          <img src="/images/service-storage.jpg" alt="仓储服务" />
        </div>
        <div class="card-content">
          <h4 class="card-title">仓储服务</h4>
          <p class="card-description">专业仓储·智能管理<br>实时监控·安全存储</p>
        </div>
      </div>

      <!-- 数字化工厂 -->
      <div class="service-card">
        <div class="card-image">
          <img src="/images/service-digital-factory.jpg" alt="数字化工厂" />
        </div>
        <div class="card-content">
          <h4 class="card-title">数字化工厂</h4>
          <p class="card-description">智能制造·数字化管理<br>效率提升·品质保证</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 平台服务数据
const services = ref([
  {
    id: 1,
    title: '物流配送',
    description: '冷链运输·全程监控\n准时送达·品质保证',
    image: '/images/service-logistics.jpg',
    icon: 'fas fa-truck'
  },
  {
    id: 2,
    title: '供应链金融',
    description: '供应链金融·信用贷款\n灵活周转·快速审批',
    image: '/images/service-supply-chain.jpg',
    icon: 'fas fa-hand-holding-usd'
  },
  {
    id: 3,
    title: '数字营销',
    description: '品牌推广·市场分析\n精准营销·效果追踪',
    image: '/images/service-digital-marketing.jpg',
    icon: 'fas fa-chart-line'
  },
  {
    id: 4,
    title: '仓储服务',
    description: '专业仓储·智能管理\n实时监控·安全存储',
    image: '/images/service-storage.jpg',
    icon: 'fas fa-warehouse'
  },
  {
    id: 5,
    title: '数字化工厂',
    description: '智能制造·数字化管理\n效率提升·品质保证',
    image: '/images/service-digital-factory.jpg',
    icon: 'fas fa-industry'
  }
])
</script>

<style lang="scss" scoped>
.platform-services {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: $spacing-lg;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    
    h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #333;
      
      i {
        color: #e4393c;
        font-size: 22px;
      }
    }
    
    .more-link {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
      font-size: 14px;
      text-decoration: none;
      transition: all 0.3s;
      
      &:hover {
        color: #e4393c;
      }
    }
  }

  .services-description {
    margin-bottom: 20px;
    
    p {
      margin: 0;
      font-size: 14px;
      color: #666;
      line-height: 1.6;
    }
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: $spacing-md;

    @include tablet {
      grid-template-columns: repeat(3, 1fr);
      gap: $spacing-sm;
    }

    @include mobile {
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-sm;
    }

    .service-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }

      .card-image {
        width: 100%;
        height: 140px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        &:hover img {
          transform: scale(1.05);
        }
      }

      .card-content {
        padding: 15px;

        .card-title {
          margin: 0 0 10px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          line-height: 1.4;
        }

        .card-description {
          margin: 0;
          font-size: 13px;
          color: #666;
          line-height: 1.6;
          white-space: pre-line;
        }
      }
    }
  }
}
</style>